<template>
	<el-dialog :close-on-click-modal="false" :title="`${mode === 'add' ? '新增' : '修改'}作业项目`" width="850px" v-model="visible" @confirm="confirm"
		@cancel="visible = false" @close="closeDialog">
		<div class="formData">
			<el-form :model="formData" ref="ruleForm" label-width="125px" :rules="rules">
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="拖轮" prop="tugId">
							<Select placeholder="请选择拖轮" :selectData="selects.tugList" v-model:value="formData.tugId"
								v-model:label="formData.tugNo" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="单耗" prop="oneHourConsume">
							<el-input v-model="formData.oneHourConsume" placeholder="请填写单耗" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="能耗记录起日期" prop="beginDte">
							<el-date-picker v-model="formData.beginDte" value-format="YYYY-MM-DD" type="date"
								placeholder="请选择记录起日期" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="能耗记录止日期" prop="endDte">
							<el-date-picker v-model="formData.endDte" value-format="YYYY-MM-DD" type="date"
								placeholder="请选择记录止日期" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="8">
						<el-form-item label="左主机起小时数" prop="leftMainBegNum">
							<el-input v-model="formData.leftMainBegNum" placeholder="请填写左主机开始小时数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="左主机止小时数" prop="leftMainEndNum">
							<el-input v-model="formData.leftMainEndNum" placeholder="请填写左主机结束小时数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="左主机作业时长" prop="leftMainWorkHours">
							<el-input v-model="formData.leftMainWorkHours" placeholder="左主机作业时长" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="8">
						<el-form-item label="右主机起小时数" prop="rightMainBegNum">
							<el-input v-model="formData.rightMainBegNum" placeholder="右主机开始小时数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="右主机止小时数" prop="rightMainEndNum">
							<el-input v-model="formData.rightMainEndNum" placeholder="右主机结束小时数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="右主机作业时长" prop="rightMainWorkHours">
							<el-input v-model="formData.rightMainWorkHours" placeholder="右主机作业时长" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="8">
						<el-form-item label="1号副机起小时数" prop="oneAuxBegNum">
							<el-input v-model="formData.oneAuxBegNum" placeholder="1号副机开始小时数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="1号副机止小时数" prop="oneAuxEndNum">
							<el-input v-model="formData.oneAuxEndNum" placeholder="1号副机结束小时数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="1号副机作业时长" prop="oneAuxWorkHours">
							<el-input v-model="formData.oneAuxWorkHours" placeholder="1号副机作业时长" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="8">
						<el-form-item label="2号副机起小时数" prop="twoAuxBegNum">
							<el-input v-model="formData.twoAuxBegNum" placeholder="2号副机开始小时数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="2号副机止小时数" prop="twoAuxEndNum">
							<el-input v-model="formData.twoAuxEndNum" placeholder="2号副机结束小时数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="2号副机作业时长" prop="twoAuxWorkHours">
							<el-input v-model="formData.twoAuxWorkHours" placeholder="2号副机作业时间" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="加油量" prop="oriAddVolume">
							<el-input v-model="formData.oriAddVolume" placeholder="请填写加油量" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="消耗油量" prop="oriCost">
							<el-input v-model="formData.oriCost" placeholder="请填写油耗" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="初始存油量" prop="oriBegVolume">
							<el-input v-model="formData.oriBegVolume" placeholder="请填写初始存油量" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="结束存油量" prop="oriEndVolume">
							<el-input v-model="formData.oriEndVolume" placeholder="请填写结束存油量" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="前吃水" prop="beforeDraft">
							<el-input v-model="formData.beforeDraft" placeholder="请填写前吃水" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="后吃水" prop="ofterDraft">
							<el-input v-model="formData.ofterDraft" placeholder="请填写后吃水" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="用水量" prop="waterCost">
							<el-input v-model="formData.waterCost" placeholder="请填写用水量" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用电量" prop="powerCost">
							<el-input v-model="formData.powerCost" placeholder="请填写用电量" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="24">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="formData.remark" placeholder="请填写备注" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closeDialog">取消</el-button>
				<el-button type="primary" @click="confirm">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		defineEmits,
		defineExpose,
		nextTick
	} from "vue";
	import {
		ElMessage,
		ElMessageBox,
		ElNotification
	} from "element-plus";
	import api from '@/api/consume/index'
	import Select from '@/components/Select/index.vue'
	import tugApi from '@/api/basicData/tug/index'
	const emit = defineEmits(['callback'])
	const selects = ref({
		tugList: []
	})
	const validateAmount = (rule, value, callback) => {
		if (!value) {
			return callback()
		}
		// 使用正则表达式校验小数点后是否只有两位  
		if (!/^-?\d+(\.\d{1,2})?$/.test(value)) {
			callback(new Error('请输入数字'));
		} else {
			if(value<0){
				callback(new Error('输入数字不能小于0'));
			}else{
				// 注意：这里可能还需要进一步处理，确保末尾不是".00"之类的，但为简化示例，暂不处理
				callback();
			}
		}
	}
	// 监听日期起止是否颠倒
	const getDateStatus = (rule, value = rule.cellValue, callback) => {
		//判断起始截至日期都已选择
		if (formData.value.beginDte && formData.value.endDte) {
			if (new Date(formData.value.beginDte) > new Date(formData.value.endDte)) {
				if (rule.field == 'beginDte') {
					return new Error('起始日期不能小于截止日期')
				} else {
					return new Error('截止日期不能大于起始日期')
				}
			}
		}
		if (!callback) return
		callback()
	}
	// 监听小时数
	const numValidator = (rule, value = rule.cellValue, callback) => {
		//判断左主机起始截止小时数都已填写
		if (formData.value.leftMainBegNum && formData.value.leftMainEndNum) {
			if (parseFloat(formData.value.leftMainEndNum) < parseFloat(formData.value.leftMainBegNum)) {
				if (rule.field == 'leftMainBegNum') {
					return new Error('起始小时数不能大于截止小时数')
				} else {
					return new Error('截止小时数不能小于起始小时数')
				}
			} else {
				//计算左主机作业时长  截止小时数 - 起始小时数
				formData.value.leftMainWorkHours = (parseFloat(formData.value.leftMainEndNum) - parseFloat(formData
					.value.leftMainBegNum)).toFixed(2)
			}
		}
		//判断右主机起始截止小时数都已填写
		if (formData.value.rightMainBegNum && formData.value.rightMainEndNum) {
			if (parseFloat(formData.value.rightMainEndNum) < parseFloat(formData.value.rightMainBegNum)) {
				if (rule.field == 'rightMainBegNum') {
					return new Error('起始小时数不能大于截止小时数')
				} else {
					return new Error('截止小时数不能小于起始小时数')
				}
			} else {
				//计算右主机作业时长  截止小时数 - 起始小时数
				formData.value.rightMainWorkHours = (parseFloat(formData.value.rightMainEndNum) - parseFloat(formData
					.value.rightMainBegNum)).toFixed(2)
			}
		}
		//判断1号副机起始截止小时数都已填写
		if (formData.value.oneAuxBegNum && formData.value.oneAuxEndNum) {
			if (parseFloat(formData.value.oneAuxEndNum) < parseFloat(formData.value.oneAuxBegNum)) {
				if (rule.field == 'oneAuxBegNum') {
					return new Error('起始小时数不能大于截止小时数')
				} else {
					return new Error('截止小时数不能小于起始小时数')
				}
			} else {
				//计算1号副机作业时长  截止小时数 - 起始小时数
				formData.value.oneAuxWorkHours = (parseFloat(formData.value.oneAuxEndNum) - parseFloat(formData.value
					.oneAuxBegNum)).toFixed(2)
			}
		}
		//判断2号副机起始截止小时数都已填写
		if (formData.value.twoAuxBegNum && formData.value.twoAuxEndNum) {
			if (parseFloat(formData.value.twoAuxEndNum) < parseFloat(formData.value.twoAuxBegNum)) {
				if (rule.field == 'twoAuxBegNum') {
					return new Error('起始小时数不能大于截止小时数')
				} else {
					return new Error('截止小时数不能小于起始小时数')
				}
			} else {
				//计算2号副机作业时长  截止小时数 - 起始小时数
				formData.value.twoAuxWorkHours = (parseFloat(formData.value.twoAuxEndNum) - parseFloat(formData.value
					.twoAuxBegNum)).toFixed(2)
			}
		}
		//判断初始存油量、加油量、结束存油量都已填写
		if (formData.value.oriAddVolume && formData.value.oriBegVolume && formData.value.oriEndVolume) {
			//计算消耗油量   初始存油量 + 加油量 - 结束存油量
			formData.value.oriCost = parseFloat(formData.value.oriAddVolume) + parseFloat(formData.value
				.oriBegVolume) - parseFloat(formData.value.oriEndVolume);

			//判断左、右主机作业时长是否都已计算
			if (formData.value.leftMainWorkHours && formData.value.rightMainWorkHours) {
				//计算单耗  消耗油量 / ((左主机作业小时数 + 右主机作业小时数) / 2)
				formData.value.oneHourConsume = (parseFloat(formData.value.oriCost) / ((parseFloat(formData.value
					.leftMainWorkHours) + parseFloat(formData.value.rightMainWorkHours)) / 2)).toFixed(2)
			}
		}


		if (!callback) return
		callback()
	}

	const visible = ref(false)
	const mode = ref('add')
	const row = ref({})
	const formData = ref({
		tugId: '',
		leftMainBegNum: '',
		rightMainEndNum: '',
		reportMon: '',
		oneAuxBegNum: '',
		twoAuxBegNum: '',
		leftMainWorkHours: '',
		rightMainWorkHours: '',
		oneHourConsume: '',
		oriAddVolume: '',
		oriBegVolume: '',
		oriEndVolume: '',
		oriCost: '',
		ofterDraft: '',
		beforeDraft: '',
		waterCost: '',
		powerCost: '',
		remark: '',
		oneAuxWorkHours: '',
		twoAuxWorkHours: '',
		oneAuxEndNum: '',
		twoAuxEndNum: '',
		rightMainBegNum: '',
		leftMainEndNum: '',
		beginDte: '',
		endDte: '',
	})
	const ruleForm = ref({})

	const rules = ref({
		leftMainBegNum: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: numValidator,trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		rightMainEndNum: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: numValidator,trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		oneAuxBegNum: [
			{validator: numValidator,trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		twoAuxBegNum: [
			{validator: numValidator,trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		leftMainWorkHours: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		rightMainWorkHours: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		oneHourConsume: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		oriAddVolume: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: numValidator,trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		oriBegVolume: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: numValidator,trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		oriEndVolume: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: numValidator,trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		oriCost: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		ofterDraft: [
			{validator: validateAmount,trigger: 'blur'}
		],
		beforeDraft: [
			{validator: validateAmount,trigger: 'blur'}
		],
		waterCost: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		powerCost: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'}
		],
		oneAuxWorkHours: [
			{validator: validateAmount,trigger: 'blur'}
		],
		twoAuxWorkHours: [
			{validator: validateAmount,trigger: 'blur'}
		],
		oneAuxEndNum: [
			{validator: validateAmount,trigger: 'blur'},
			{validator: numValidator,trigger: 'blur'}
		],
		twoAuxEndNum: [
			{validator: validateAmount,trigger: 'blur'},
			{validator: numValidator,trigger: 'blur'}
		],
		rightMainBegNum: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'},
			{validator: numValidator,trigger: 'blur'}
		],
		leftMainEndNum: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: validateAmount,trigger: 'blur'},
			{validator: numValidator,trigger: 'blur'}
		],
		beginDte: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: getDateStatus,trigger: 'blur'}
		],
		endDte: [
			{required: true,message: '不能为空',trigger: 'blur'},
			{validator: getDateStatus,trigger: 'blur'}
		],
		tugId: [
			{required: true,message: '不能为空',trigger: 'blur'}
		]
	})
	// 展示
	const show = params => {
		visible.value = true
		mode.value = params?.mode || 'add'
		if (mode.value === 'edit') {
			row.value = params.row
			editInit()
		}
	}
	// 编辑
	const editInit = async () => {
		const {
			data
		} = await api.getDetailById({
			id: row.value.id
		})
		formData.value = {
			...data
		}
	}
	// 确认
	const confirm = () => {
		ruleForm.value.validate(valid => {
			if (valid) {
				let request
				if (mode.value === 'add') {
					request = api.save
					delete formData.value.id
				} else {
					request = api.save
				}
				request(formData.value).then(res => {
					if (res.code == '200') {
						ElMessage.success('保存成功')
						visible.value = false
						emit('callback')
					} else {
						ElMessage.error(res.msg)
					}
				})
			} else {
				ElMessage.warning('请完善表单信息！')
			}
		})
	}

	// 重置
	const closeDialog = () => {
		nextTick(() => {
			visible.value = false
			ruleForm.value.resetFields()
		})
	}
	defineExpose({
		show
	})
	//获取拖轮集合
	const getTugList = () => {
		selects.value.tugList = []
		tugApi.getList({startPage: 1,pageSize: 100}).then(res=>{
			if(res.data.records.length > 0){
				res.data.records.forEach(item=>{
					selects.value.tugList.push({label:item.tugNo,value:item.id})
				})
			}
		})
	}
	onMounted(()=>{
		getTugList()
	})
</script>